<template>
  <div id="question-management" class="container">
    <table-filter>
      <el-input
        placeholder="请输入题目内容"
        clearable
        v-model="apiSetting.data.quetitle"
      />
      <el-select
        placeholder="请选择科目"
        clearable
        @change="onSubChange"
        @clear="chapters.splice(0) && (apiSetting.data.chapterid = null)"
        v-model="apiSetting.data.subid"
      >
        <el-option
          v-for="item in subjects"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        placeholder="请选择章节"
        clearable
        v-model="apiSetting.data.chapterid"
      >
        <el-option
          v-for="item in chapters"
          :key="item.chapterid"
          :label="item.chaptername"
          :value="item.chapterid"
        ></el-option>
      </el-select>
      <el-select
        v-model="apiSetting.data.type"
        clearable
        placeholder="请选择一个题型"
      >
        <el-option
          v-for="item in queType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
        >新增题目</el-button
      >
      <el-button plain type="primary" @click="importDialog = true"
        >导入题目</el-button
      >
      <el-button plain type="danger" @click="delQue(selectedQue)"
        >批量删除</el-button
      >
      <el-button
        plain
        type="primary"
        @click="exportExamHistory"
        v-if="userItem == 2007"
        >导出题目记录</el-button
      >
    </el-row>
    <data-table
      ref="dtb"
      :sort-column="sortColumn"
      :api-setting="apiSetting"
      pagination
      @selection-change="onQueSelected"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!--<el-table-column fixed prop="queid" label="QueId" show-overflow-tooltip />-->
      <el-table-column
        prop="subname"
        label="所属科目"
        width="175"
        show-overflow-tooltip
      />
      <el-table-column
        prop="chaptername"
        label="所属章节"
        width="175"
        show-overflow-tooltip
      />
      <el-table-column
        prop="qustypename"
        label="所属题型"
        width="80"
        show-overflow-tooltip
      />
      <el-table-column
        prop="quetitle"
        label="题目内容"
        width="585"
        show-overflow-tooltip
      />
      <el-table-column
        prop="knowledgePoint"
        label="知识点"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createtime"
        label="创建时间"
        width="165"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createperson"
        label="创建人"
        width="85"
        show-overflow-tooltip
      />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{ row: { queid, createperson } }">
          <el-button
            class="warning"
            @click="edit(queid, 'view')"
            type="text"
            size="small"
            >查看</el-button
          >
          <el-button
            @click="hasEaPermission(createperson, 'edit', queid)"
            type="text"
            size="small"
            >编辑</el-button
          >
          <el-button
            @click="hasEaPermission(createperson, 'delQue', queid)"
            type="text"
            class="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </data-table>
    <ea-que
      ref="eaDialog"
      :show.sync="showEaDialog"
      :subjects="subjects"
      @on-reload="dtb.loadData()"
    />
    <import-file
      upload-api="/api/sys/question/uploadQue"
      template-url="/sys/question/downloadTemplate"
      template-file-name="题目模板.xlsx"
      @on-reload="dtb.loadData()"
      title="导入题目"
      :show.sync="importDialog"
    />
  </div>
</template>

<script>
import dtb from "../../../mixins/refs/dtb";
import eaDialog from "../../../mixins/refs/eaDialog";
import EaQue from "./EaQue";
import { queType } from "@/staticData/queType";
import deleteRow from "../../../mixins/dataTable/deleteRow";
import ImportFile from "@/views/component/ImportFile";
import tbSearch from "@/mixins/dataTable/tbSearch";
import permission from "@/mixins/permission/permission";
import { mapGetters } from "vuex";

export default {
  name: "index",
  components: { ImportFile, EaQue },
  mixins: [permission, tbSearch, dtb, eaDialog, deleteRow],
  data() {
    return {
      apiSetting: {
        method: "post",
        url: "/sys/question/getQueListVO",
        data: {
          quetitle: null,
          subid: null,
          type: null,
          chapterid: null
        }
      },
      queType,
      sortColumn: ["subname", "chaptername", "qustypename"],
      subjects: [],
      chapters: [],
      selectedQue: [],
      importDialog: false,
      userItem: JSON.parse(localStorage.getItem("user")).data.userid
    };
  },
  created() {
    this.api.getSubjects.apply(this);
  },
  computed: {
    ...mapGetters(["getUserAccount"])
  },
  methods: {
    onSubChange(subid) {
      this.api.getChapter.apply(this, [subid]);
    },
    onQueSelected(selection) {
      this.selectedQue = selection;
    },
    edit(queid, type = "edit") {
      this.api.getQueDetail(queid).then(res => {
        this.showEaDialog = true;
        this.eaDialog.onSubChange(res.subid);
        if (res.answer.length > 1) {
          res.answer = res.answer.split("");
        }
        this.$nextTick(() => {
          this.eaDialog.setEditData({
            singleData: res,
            type
          });
        });
      });
    },
    delQue(ids) {
      if (Array.isArray(ids)) {
        if (!ids.length) {
          this.$notify.warning("请选择删除题目！");
          return;
        }
        //是否含有其他人创建的数据
        const res = ids.filter(
          item => item.createperson !== this.getUserAccount
        ).length;
        if (res) {
          this.$notify.warning("不能删除非本人创建的数据！");
          return;
        }
        ids = ids.map(item => item.queid);
      }
      this.delRow(`/sys/question/deleteQue/${ids}`, "题目");
    },
    exportExamHistory() {
      const loading = this.$loading({
        lock: true,
        text: "正在导出...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let quetitle = this.apiSetting.data.quetitle,
        subid = this.apiSetting.data.subid,
        chapterid = this.apiSetting.data.chapterid,
        type = this.apiSetting.data.type;
      this.downLoadFile(
        {
          method: "post",
          url: "/sys/question/exportStuExcel",
          data: {
            quetitle,
            subid,
            chapterid,
            type,
            cols: [
              "count",
              "quetitle",
              "optionsA",
              "optionsB",
              "optionsC",
              "optionsD",
              "optionsE",
              "optionsF",
              "answer",
              "qustypename",
              "difficult",
              "subname",
              "chaptername",
              "knowledgePoint",
              "createtime",
              "createperson",
              "queanalysis"
            ]
          }
        },
        "题目记录.xls",
        loading
      );
    }
  }
};
</script>

<style scoped></style>
